<template>
  <div class="likes-container">
    <div class="likes-header">
      <h1>我的喜欢</h1>
      <p class="subtitle">在这里查看你点赞过的游记</p>
    </div>

    <el-skeleton v-if="loading" :rows="5" animated />

    <el-row v-else :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="note in likeNotes" :key="note.id">
        <el-card class="note-card" shadow="hover">
          <div class="note-cover" @click="goToNoteDetail(note.id)">
            <img :src="note.cover_image || 'https://picsum.photos/300/200'" :alt="note.title">
            <div class="note-author">
              <el-avatar :size="32" :src="note.author?.avatar || 'https://picsum.photos/100/100'"></el-avatar>
              <span>{{ note.author?.nickname || note.author?.username || '匿名用户' }}</span>
            </div>
          </div>
          <div class="note-content">
            <h3>{{ note.title }}</h3>
            <p class="note-desc">{{ note.description }}</p>
            <div class="note-meta">
              <span><el-icon>
                  <Location />
                </el-icon> {{ note.city || '未知城市' }}</span>
              <span><el-icon>
                  <Calendar />
                </el-icon> {{ note.created_at ? note.created_at.split('T')[0] : '未知日期' }}</span>
            </div>
            <div class="note-stats">
              <span><el-icon>
                  <View />
                </el-icon> {{ note.view_count || 0 }} 阅读</span>
              <el-button type="danger" size="small" @click.stop="unlikeNote(note.id)">取消喜欢</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination v-if="pagination.total > pagination.pageSize" class="pagination" background
      layout="prev, pager, next" :current-page="pagination.page" :page-size="pagination.pageSize"
      :total="pagination.total" @current-change="handlePageChange" />

    <el-empty v-if="!loading && !likeNotes.length" description="还没有点赞的游记，去旅游圈逛逛吧～" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Location, Calendar, View } from '@element-plus/icons-vue'
import { getLikeTravelNotes, unlikeTravelNote } from '../../api/travelNote'
import { authUtils } from '../../utils/auth'

const router = useRouter()
const likeNotes = ref([])
const loading = ref(false)
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 加载点赞的游记
const loadLikeNotes = async () => {
  if (!authUtils.isLoggedIn()) {
    ElMessage.warning('请先登录')
    return
  }

  loading.value = true
  try {
    const result = await getLikeTravelNotes({
      page: pagination.value.page,
      pageSize: pagination.value.pageSize
    })

    if (result.success) {
      likeNotes.value = result.data.list
      pagination.value.total = result.data.total
    } else {
      ElMessage.error(result.message || '加载失败')
    }
  } catch (error) {
    console.error('加载点赞游记失败:', error)
    ElMessage.error('加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 取消点赞
const unlikeNote = async (id) => {
  if (!authUtils.isLoggedIn()) {
    ElMessage.warning('请先登录')
    return
  }

  try {
    const result = await unlikeTravelNote(id)
    if (result.success) {
      ElMessage.success('已取消点赞')
      // 重新加载列表
      loadLikeNotes()
    } else {
      ElMessage.error(result.message || '取消点赞失败')
    }
  } catch (error) {
    console.error('取消点赞失败:', error)
    ElMessage.error('取消点赞失败')
  }
}

// 跳转到游记详情
const goToNoteDetail = (id) => {
  router.push(`/travel-note/${id}`)
}

// 处理分页变化
const handlePageChange = (page) => {
  pagination.value.page = page
  loadLikeNotes()
}

onMounted(() => {
  loadLikeNotes()
})
</script>

<style scoped>
.likes-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.likes-header {
  margin-bottom: 20px;
}

.likes-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.subtitle {
  color: #909399;
  margin-top: 6px;
}

.note-card {
  margin-bottom: 20px;
}

.note-cover {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 12px;
  cursor: pointer;
}

.note-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.note-card:hover .note-cover img {
  transform: scale(1.05);
}

.note-author {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.note-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-desc {
  color: #606266;
  font-size: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 40px;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.note-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #909399;
  font-size: 12px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>